<template>
    <div class="payContainer">
        <van-nav-bar title="支付" left-text="返回" left-arrow @click-left="toAddress">
        </van-nav-bar>
        <h2 class="header">请选择支付方式</h2>
        <div class="payTop">
            <van-radio-group v-model="checked" class="main">
                <van-radio name="1" class="mainItem">
                    <van-icon name="wechat" color="#00c901" class="icon" /> 微信
                </van-radio>
                <hr />
                <van-radio name="2" class="mainItem">

                    <van-icon name="alipay" color="#1989fa" class="icon" />支付宝
                </van-radio>
            </van-radio-group>
            <van-dialog v-model:show="show" title=" 请进行支付" show-cancel-button @confirm="close" @cancel="close">
                <img :src="payImage" />
            </van-dialog>
        </div>

        <van-button type="primary" block class="floor" @click="toIndex">确定</van-button>

    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import QRCode from 'qrcode';
import { showConfirmDialog } from "vant";

export default defineComponent({
    name: "Pay",
});
</script>
<script lang="ts" setup>

import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import cartApi from '@/api/cartList'
import type { orderDetailData } from '@/api/cartList'
import { shopDataStore } from '@/stores/shopcart'
const shopStore = shopDataStore()
const show = ref(false);
const imgUrl = ref('')
const checked = ref("1");
const router = useRouter();
const route = useRoute()
const orderId = route.query.payId
onMounted(async () => {
    await shopStore.reqPay(orderId as any)
})
const payImage = ref('')
const toIndex = async () => {
    const payImg = shopStore.payInfo.codeUrl
    show.value = true
    payImage.value = await QRCode.toDataURL(payImg)

    try {
        const timerId = setInterval(async () => {
            await cartApi.reqPayment(orderId as any)
            clearInterval(timerId)
            show.value = false
            router.push({ name: 'shopCart' })
        }, 2000)
        // console.log(timerId);
        time.value = timerId
    } catch (error) {

    }


};
const time = ref<any>(0)
const close = () => {
    clearInterval(time.value)
}

const toAddress = () => {
    router.push({ name: 'address' })
}

</script>

<style lang="less" scoped>
.payContainer {
    position: relative;
    height: 100%;

    img {
        width: 200px;
        height: 200px;
        margin-left: 60px;
    }

    .header {
        font-size: 15px;
        font-weight: normal;
        padding: 20px 0 20px 10px;
    }

    .payTop {
        margin: 0 10px;
    }

    .main {
        background-color: white;
        height: 100px;
        font-size: 20px;
        font-weight: bold;

        hr {
            height: 1px;
            background-color: wheat;
        }

        .mainItem {
            margin: 20px 0;
            font-size: 18px;

            .icon {
                margin-right: 4px;
            }
        }
    }

    .floor {
        position: fixed;
        bottom: 0;
        z-index: 999;
    }
}
</style>
